<template>
    <div class="login-form animate__animated animate__fadeInLeftBig">
        <div class="content">

            <h1 class="animate__animated  animate__zoomInDown animate__delay-.8s">vue-bobi-admin</h1>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="50px"
                class="demo-ruleForm animate__animated  animate__zoomInDown animate__delay-.9s">
                <el-form-item label="账号" prop="pass">
                    <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="checkPass" color="rgb(222, 162, 108)">
                    <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" >登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
</template>
<style lang="scss" scoped>
$color-text:rgb(222, 162, 108);
h1{
    position: relative;
    left: 24px;
    margin-bottom: 20px;
    color: $color-text;
}
.el-input {
    width: 290px;
    height: 38px;
    margin-top: 10px;
}
.el-input__inner{
    background-color: #1d1818;
}
.el-button {
    margin-top: 10px;
    width: 290px;
    height: 40px;
}


.el-form-item :deep(.el-form-item__label){
    color: $color-text;
    font-size: 16px;
    margin-top: 12px;
}
.login-form {
    background-color: rgba(34, 53, 60);
    border-radius: 40px;
    width: 430px;
    height: 400px;
    position: relative;
    top: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    left: -20px;

    .mask{
        width: 100px;
        height: 100px;
        position: absolute;
        z-index: 1;
        background-color: rgba(255, 255, 255, .4);
    }
}

</style>
<script lang="ts" setup>
import 'animate.css';
import Vue from "vue"
import { reactive, ref,onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import {userStore}  from "@/store/user"
import { setCookie } from '@/utils/auth';
import Cookies from 'js-cookie';
import {useRouter} from 'vue-router';
import { loading } from '@/utils/loading';
const ruleFormRef = ref<FormInstance>()
const store= userStore()
const router=useRouter()

// 定义变量
const state=reactive({
    isScan:true
})

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    pass: "admin",
    checkPass: 123456,
})

const rules = reactive({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})

// 登录
const submitForm = (formEl: FormInstance | undefined) => {
    // 获取form ref是否报错
    if (!formEl) return
    formEl.validate(async(valid: any) => {
        if (valid) {
            //进行路由获取
            // 设置token，保存username
            Cookies.set("token","12345678")
            await store.getUserInfo()
            // 路由跳转
            router.push("/home")
        } else {
            console.log('error submit!')
            return false
        }
    })
}
onMounted(() => {
    loading.done()
})
</script>
  